<template>
    <section class="bk-layout-custom-component-wrapper container-jeafechf">
        <bk-sideslider
            :is-show.sync="isShowEdit"
            title="新建帖子"
            :quick-close="true"
            :show-mask="true"
            :width="600"
            direction="right"
            class="bk-layout-component-jeafechf sideslider7f028">
            <template slot="content">
                <div class="bk-layout-component-jeafechf block6f2a4">
                    <div class="bk-layout-component-jeafechf formD6549" style="">
                        <bk-form
                            :model="formD6549model"
                            :rules="formD6549rules"
                            ref="form"
                            form-type="horizontal"
                            :label-width="150">
                            <bk-form-item
                                property="title"
                                label="标题"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jeafechf">
                                <bk-input
                                    type="text"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-jeafechf inputD5111"
                                    v-model="formD6549model.title">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property="content"
                                label="内容"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jeafechf">
                                <bk-input
                                    type="textarea"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-jeafechf inputDf33f"
                                    v-model="formD6549model.content">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property=""
                                label=""
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-jeafechf">
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="primary"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-jeafechf button5fc08"
                                    @click="addPostData">
                                    提交
                                </bk-button>
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="default"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-jeafechf buttonBacc4">
                                    取消
                                </bk-button>
                            </bk-form-item>
                        </bk-form>
                    </div>
                </div>
            </template>
        </bk-sideslider>
        <div class="bk-layout-component-jeafechf blockEd837">
            <bk-swiper
                :is-loop="true"
                :loop-time="8000"
                :pics="swiperDca1fpics"
                class="bk-layout-component-jeafechf swiperDca1f">
            </bk-swiper>

            <div class="bk-layout-row-jeafechf grid-fcbf1">
                <div class="bk-layout-col-jeafechf column-3ac3e">
                    <div class="bk-layout-component-jeafechf block20938">
                        <bk-button
                            title="hello world"
                            size="normal"
                            theme="primary"
                            :disabled="false"
                            :loading="false"
                            class="bk-layout-component-jeafechf buttonC70bd"
                            @click="ShowEdit">
                            新建帖子
                        </bk-button>
                    </div>

                    <div
                        class="bk-free-layout-jeafechf free-layout-8578a"
                        v-for="(freeLayout8578aItem, freeLayout8578aIndex) in postList"
                        :key="freeLayout8578aIndex">
                        <div style="position: absolute; top: 13px; left: 0px; margin-bottom: 5px; margin-top: 5px;">
                            <div class="bk-layout-component-jeafechf block27ffa">
                                <bk-link
                                    theme="primary"
                                    href=""
                                    :disable="false"
                                    :underline="false"
                                    icon=""
                                    icon-placement="left"
                                    class="bk-layout-component-jeafechf link6c80a"
                                    @click="(...args) => gotoDetail(freeLayout8578aItem.id, ...args)">
                                    {{freeLayout8578aItem.title}}</bk-link>
                                    
                                <div class="bk-layout-row-jeafechf grid-491ce">
                                    <div class="bk-layout-col-jeafechf column-11870">
                                        <span title="" class="bk-layout-component-jeafechf textEbc83">
                                            {{ freeLayout8578aItem.createUser }}
                                        </span>
                                    </div>
                                    <div class="bk-layout-col-jeafechf column-d937d">
                                        <span title="" class="bk-layout-component-jeafechf textD1026">
                                            {{ freeLayout8578aItem.createTime }}
                                        </span>
                                    </div>
                                    <div class="bk-layout-col-jeafechf column-20e8a">
                                        <bk-icon
                                            type="password"
                                            size="14px"
                                            class="bk-layout-component-jeafechf bkIcon20347">
                                        </bk-icon>
                                    </div>
                                    <div class="bk-layout-col-jeafechf column-4b620">
                                        <bk-animate-number
                                            :value="0"
                                            :digits="0"
                                            class="bk-layout-component-jeafechf animateNumber79579">
                                        </bk-animate-number>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bk-layout-col-jeafechf column-f7aba">
                    <bk-image
                        src="https://bkrepo.ce.bktencent.com/generic/bksaas-addons/public-bkapp-bk_les-5/253/file-lib/b02d4e1f4bf7d8619882c2022880b81c.png"
                        alt=""
                        class="bk-layout-component-jeafechf image56c43">
                    </bk-image>
                    <!-- eslint-disable -->
                    <!-- prettier-ignore -->
                    <p title=""   class='bk-layout-component-jeafechf paragraphAf1cb'>一只扫帚飞越太阳晒热的岩石，操纵扫帚的是一位美丽的少女，她身穿漆黑长袍且头戴三角帽灰色的发丝随风摇曳，若是哪里有人，她绝对会令任何人回头并且露出叹息，具有如此美貌的她究竟是谁呢，没错，就是我——Elaina</p>
                    <!-- eslint-enable -->
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                formD6549model: { title: '', content: '' },
                formD6549rules: { title: [], content: [] },
                swiperDca1fpics: [
                    {
                        url:
                            'https://bkrepo.ce.bktencent.com/generic/bksaas-addons/public-bkapp-bk_les-5/253/file-lib/3468a740fe3d0821b8ca60870871f505.jpg',
                        link: ''
                    },
                    {
                        url:
                            'https://bkrepo.ce.bktencent.com/generic/bksaas-addons/public-bkapp-bk_les-5/253/file-lib/c149f8fb4c2d59567d532fddd50c3afd.png',
                        link: ''
                    }
                ],
                isShowEdit: getInitVariableValue({ all: false, prod: false, stag: false }, 0),
                postList: getInitVariableValue(
                    { all: [], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                )
            }
        },

        created () {
            this.getPostDataList('', '')
        }
    }
</script>
<style lang="css" scoped>
    .container-jeafechf {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-jeafechf {
        display: flex;
    }
    .bk-layout-row-jeafechf:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-jeafechf {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-jeafechf {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-jeafechf {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-jeafechf.sideslider7f028 {
        display: inline-block;
    }
    .bk-layout-component-jeafechf.block6f2a4 {
        display: block;
        width: 100%;
    }
    .formD6549 {
        width: 100%;
    }
    .bk-layout-component-jeafechf.inputD5111 {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-jeafechf.inputDf33f {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-jeafechf.button5fc08 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
    }
    .bk-layout-component-jeafechf.buttonBacc4 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
        margin-left: 8px;
    }
    .bk-layout-component-jeafechf.blockEd837 {
        display: block;
        width: 100%;
        height: 820px;
    }
    .bk-layout-component-jeafechf.swiperDca1f {
        width: 100%;
        height: 300px;
        margin-left: 0;
    }
    .grid-fcbf1 {
        margin-top: 30px;
    }
    .column-3ac3e {
        width: 83.3333%;
        margin-left: 1px;
    }
    .bk-layout-component-jeafechf.block20938 {
        display: block;
        width: 100%;
    }
    .bk-layout-component-jeafechf.buttonC70bd {
        display: inline-block;
        vertical-align: middle;
    }
    .free-layout-8578a {
        height: 127.4444580078125px;
        margin-top: 10px;
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid rgb(194, 194, 194);
        background-color: white;
    }
    .bk-layout-component-jeafechf.block27ffa {
        display: block;
        right: 0;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .bk-layout-component-jeafechf.link6c80a {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
    }
    .grid-491ce {
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 20px;
    }
    .column-11870 {
        width: 10.5263%;
    }
    .bk-layout-component-jeafechf.textEbc83 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 0;
        width: 100%;
    }
    .column-d937d {
        width: 73.6842%;
    }
    .bk-layout-component-jeafechf.textD1026 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 0;
        width: 277px;
        text-indent: 20px;
    }
    .column-20e8a {
        width: 5.2632%;
    }
    .bk-layout-component-jeafechf.bkIcon20347 {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
        margin-top: 6px;
        margin-bottom: 6px;
    }
    .column-4b620 {
        width: 10.5263%;
    }
    .bk-layout-component-jeafechf.animateNumber79579 {
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
    }
    .column-f7aba {
        width: 16.6667%;
        margin-left: 52px;
    }
    .bk-layout-component-jeafechf.image56c43 {
        display: inline-block;
        width: 100px;
        vertical-align: middle;
        margin-top: 8px;
        margin-left: 20px;
        height: 100px;
        border-radius: 50px;
        border: 4px solid white;
    }
    .bk-layout-component-jeafechf.paragraphAf1cb {
        display: inline-block;
        width: 100%;
        text-align: left;
        font-size: 16px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 0;
        font-family: PingFang SC, sans-serif;
        font-style: normal;
        background-color: white;
        padding: 16px;
    }
</style>
